<!-- 动态调整图片尺寸 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>动态调整图片尺寸</title>
    <style>
      /* 图片容器的初始样式 */
      #image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px;
        padding: 10px;
        border: 2px solid #ccc;
      }

      /* 图片的样式 */
      #myImage {
        max-width: 100%;
        /* 限制图片最大宽度 */
        height: auto;
        /* 保持图片比例 */
      }

      /* 页面内容的样式 */
      #content {
        text-align: center;
        margin-top: 20px;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <!-- 图片容器 -->
    <div id="image-container">
      <img id="myImage" src="../img/avatar.png" alt="Sample Image" />
      <!-- 替换为你的图片路径 -->
    </div>

    <!-- 页面其他内容 -->
    <div id="content">
      <h1>Welcome to the Page</h1>
      <p>This content adjusts based on the image size.</p>
    </div>
    <script>
      //有时需要根据图片的实际尺寸来调整页面布局或执行其他操作，可以在load事件中完成。
      //监听页面加载完毕事件
      window.addEventListener("load", function () {
        //获取所需图片元素
        const img = document.getElementById("myImage");
        //输出图片的实际尺寸
        console.log(`Image loaded width:${img.width} x ${img.height}`);
        //根绝图片的实际尺寸调整布局
        adjustLayoutBasedOnImage(img);
      });
      //根据图片的尺寸调整布局函数
      function adjustLayoutBasedOnImage(img) {
        //获取图片容器元素
        const imageContainer = document.getElementById("image-container");
        //根据图片的宽度设置容器的宽度
        if (img.width < 300) {
          imageContainer.style.width = "300px"; // 设置最小尺寸
          imageContainer.style.borderColor = "#ff0000"; //小图时使用红色边框
        } else if (img.width > 600) {
          imageContainer.style.width = "600px"; // 设置最大宽度
          imageContainer.style.borderColor = "#00ff00"; //大图时使用绿色边框
        } else {
          imageContainer.style.width = img.width + "px"; // 使用图片的实际尺寸
          imageContainer.style.borderColor = "#0000ff"; //中等大小时使用蓝色边框
        }
        //调整页面的其他内容布局
        const content = document.getElementById("content");
        if (img.height > 400) {
          content.style.marginTop = "50px"; //如果图片很高 增加内容的顶部间距
        } else {
          content.style.marginTop = "20px"; //否则保持默认的间距
        }
      }
    </script>
  </body>
</html>
